<template>
  <view class="container">
    <!-- Header -->
    <view class="header">
      <view class="back-button" @click="goBack">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="15 18 9 12 15 6"></polyline>
        </svg>
      </view>
      <text class="header-title">AI学情分析</text>
      <view class="header-actions">
      </view>
    </view>

    <!-- Main Content -->
    <scroll-view scroll-y class="content">
      <!-- User Profile Summary -->
      <view class="profile-card">
        <view class="profile-info">
          <view class="profile-avatar">
            <image src="https://imagecgr.oss-cn-beijing.aliyuncs.com/2a54e9d46df2b5f684313436dabda17d.jpeg"
              mode="aspectFill"></image>
          </view>
          <view class="profile-details">
            <text class="profile-name">张同学</text>
            <text class="profile-class">大二年级 · 理科班</text>
            <view class="profile-badges">
              <text class="badge">学习达人</text>
              <text class="badge">高数能手</text>
            </view>
          </view>
        </view>
      </view>

      <!-- Tabs Navigation -->
      <view class="tabs">
        <view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: activeTab === tab.value }"
          @tap="setActiveTab(tab.value)">
          <text>{{ tab.label }}</text>
        </view>
      </view>

      <!-- Tab Content -->
      <!-- Overview Tab -->
      <view v-if="activeTab === 'overview'" class="tab-content">
        <view class="card">
          <view class="card-header">
            <view class="card-title">
              <view class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
                  <polyline points="16 7 22 7 22 13"></polyline>
                </svg>
              </view>
              <text>学习概况总览</text>
            </view>
            <text class="card-description">本周学习数据分析</text>
          </view>
          <view class="card-content">
            <view class="stats-grid">
              <view class="stat-item">
                <text class="stat-label">总学习时长</text>
                <text class="stat-value">24.5小时</text>
              </view>
              <view class="stat-item">
                <text class="stat-label">完成任务</text>
                <text class="stat-value">18/20</text>
              </view>
              <view class="stat-item">
                <text class="stat-label">专注度评分</text>
                <text class="stat-value">92分</text>
              </view>
              <view class="stat-item">
                <text class="stat-label">知识点掌握</text>
                <text class="stat-value">78%</text>
              </view>
            </view>

            <view class="chart-container">
              <text class="chart-title">每日学习时长</text>
              <view class="chart-wrapper">
                <qiun-data-charts type="area" :opts="areaChartOpts" :chartData="learningProgressData" />
              </view>
            </view>
          </view>
        </view>

        <view class="card">
          <view class="card-header">
            <view class="card-title">
              <view class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M2 12h2a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4a2 2 0 0 1 2-2h2"></path>
                  <circle cx="12" cy="8" r="5"></circle>
                </svg>
              </view>
              <text>AI学习建议</text>
            </view>
          </view>
          <view class="card-content">
            <view class="suggestion-item">
              <view class="suggestion-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <line x1="12" y1="5" x2="12" y2="19"></line>
                  <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
              </view>
              <view class="suggestion-content">
                <text class="suggestion-title">增加物理学习时间</text>
                <text class="suggestion-desc">根据你的知识点掌握情况，建议增加物理科目的学习时间，特别是力学部分。</text>
              </view>
            </view>
            <view class="suggestion-item">
              <view class="suggestion-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <line x1="12" y1="5" x2="12" y2="19"></line>
                  <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
              </view>
              <view class="suggestion-content">
                <text class="suggestion-title">优化学习时间分配</text>
                <text class="suggestion-desc">你在晚上的学习效率较低，建议将更多学习任务安排在上午和下午。</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Knowledge Points Tab -->
      <view v-if="activeTab === 'knowledge'" class="tab-content">
        <view class="card">
          <view class="card-header">
            <view class="card-title">
              <view class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
                </svg>
              </view>
              <text>知识点掌握分析</text>
            </view>
            <text class="card-description">各学科知识点掌握情况</text>
          </view>
          <view class="card-content">
            <view class="chart-container">
              <view class="chart-wrapper">
                <qiun-data-charts type="pie" :opts="pieChartOpts" :chartData="knowledgePointsData" />
              </view>
            </view>

            <view class="progress-list">
              <view v-for="(subject, index) in subjects" :key="index" class="progress-item">
                <view class="progress-header">
                  <text class="progress-label">{{ subject.name }}</text>
                  <text class="progress-value">{{ subject.value }}%</text>
                </view>
                <view class="progress-bar">
                  <view class="progress-fill" :style="{ width: subject.value + '%' }"></view>
                </view>
              </view>
            </view>

            <view class="highlight-box">
              <text class="highlight-title">重点提升领域</text>
              <view class="highlight-item">
                <view class="dot red"></view>
                <text class="highlight-text">物理：力学和电磁学需要加强</text>
              </view>
              <view class="highlight-item">
                <view class="dot orange"></view>
                <text class="highlight-text">语文：古文阅读理解有待提高</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Learning Habits Tab -->
      <view v-if="activeTab === 'habits'" class="tab-content">
        <view class="card">
          <view class="card-header">
            <view class="card-title">
              <view class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="10"></circle>
                  <polyline points="12 6 12 12 16 14"></polyline>
                </svg>
              </view>
              <text>学习习惯洞察</text>
            </view>
            <text class="card-description">你的学习时间和效率分析</text>
          </view>
          <view class="card-content">
            <view class="chart-container">
              <view class="chart-wrapper">
                <qiun-data-charts type="column" :opts="columnChartOpts" :chartData="learningHabitsData" />
              </view>
            </view>

            <view class="highlight-box">
              <text class="highlight-title">学习习惯分析</text>
              <view v-for="(item, index) in habitInsights" :key="index" class="insight-item">
                <view class="insight-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="9 18 15 12 9 6"></polyline>
                  </svg>
                </view>
                <text class="insight-text">{{ item }}</text>
              </view>
            </view>

            <view class="highlight-box">
              <text class="highlight-title">专注度分析</text>
              <view v-for="(focus, index) in focusLevels" :key="index" class="progress-item">
                <view class="progress-header">
                  <text class="progress-label">{{ focus.time }}专注度</text>
                  <text class="progress-value">{{ focus.value }}%</text>
                </view>
                <view class="progress-bar">
                  <view class="progress-fill" :style="{ width: focus.value + '%' }"></view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Growth Trajectory Tab -->
      <view v-if="activeTab === 'growth'" class="tab-content">
        <view class="card">
          <view class="card-header">
            <view class="card-title">
              <view class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M3 3v18h18"></path>
                  <path d="m19 9-5 5-4-4-3 3"></path>
                </svg>
              </view>
              <text>学习成长轨迹</text>
            </view>
            <text class="card-description">近6个月学习成绩变化</text>
          </view>
          <view class="card-content">
            <view class="chart-container">
              <view class="chart-wrapper">
                <qiun-data-charts type="area" :opts="growthChartOpts" :chartData="growthTrajectoryData" />
              </view>
            </view>

            <view class="highlight-box">
              <text class="highlight-title">成长亮点</text>
              <view v-for="(item, index) in growthHighlights" :key="index" class="insight-item">
                <view class="insight-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="9 18 15 12 9 6"></polyline>
                  </svg>
                </view>
                <text class="insight-text">{{ item }}</text>
              </view>
            </view>

            <view class="ranking-grid">
              <view class="ranking-item">
                <text class="ranking-label">班级排名</text>
                <text class="ranking-value">8 / 42</text>
                <text class="ranking-change">较上月提升5名</text>
              </view>
              <view class="ranking-item">
                <text class="ranking-label">年级排名</text>
                <text class="ranking-value">32 / 156</text>
                <text class="ranking-change">较上月提升12名</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Learning Plan Tab -->
      <view v-if="activeTab === 'plan'" class="tab-content">
        <view class="card">
          <view class="card-header">
            <view class="card-title">
              <view class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M11 12H3"></path>
                  <path d="M16 6H3"></path>
                  <path d="M16 18H3"></path>
                  <path d="m19 10-4 4"></path>
                  <path d="m15 10 4 4"></path>
                </svg>
              </view>
              <text>智能学习规划</text>
            </view>
            <text class="card-description">AI为你定制的学习计划</text>
          </view>
          <view class="card-content">
            <view class="priority-box">
              <view class="priority-header">
                <text class="priority-title">本周学习重点</text>
                <text class="priority-badge">优先级高</text>
              </view>
              <view v-for="(item, index) in weeklyPriorities" :key="index" class="insight-item">
                <view class="insight-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="9 18 15 12 9 6"></polyline>
                  </svg>
                </view>
                <text class="insight-text">{{ item }}</text>
              </view>
            </view>

            <view class="schedule-box">
              <text class="schedule-title">每日学习时间安排</text>
              <view v-for="(schedule, index) in dailySchedule" :key="index" class="schedule-item">
                <view class="schedule-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                    <line x1="16" y1="2" x2="16" y2="6"></line>
                    <line x1="8" y1="2" x2="8" y2="6"></line>
                    <line x1="3" y1="10" x2="21" y2="10"></line>
                  </svg>
                </view>
                <view class="schedule-content">
                  <text class="schedule-time">{{ schedule.time }}</text>
                  <text class="schedule-desc">{{ schedule.activity }}</text>
                </view>
              </view>
            </view>

            <view class="goals-box">
              <text class="goals-title">长期学习目标</text>
              <view v-for="(goal, index) in longTermGoals" :key="index" class="progress-item">
                <view class="progress-header">
                  <text class="progress-label">{{ goal.name }}</text>
                  <text class="progress-value">{{ goal.target }}</text>
                </view>
                <view class="progress-bar">
                  <view class="progress-fill" :style="{ width: goal.progress + '%' }"></view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// Active tab state
const activeTab = ref('overview');
const tabs = [
  { label: '总览', value: 'overview' },
  { label: '知识点', value: 'knowledge' },
  { label: '习惯', value: 'habits' },
  { label: '成长', value: 'growth' },
  { label: '规划', value: 'plan' }
];

const setActiveTab = (tab) => {
  activeTab.value = tab;
};

// 返回上一页方法
function goBack() {
  uni.reLaunch({
  	url:"/pages/center/center"
  })
}

// Chart data and options
const areaChartOpts = {
  color: ["#3b82f6"],
  padding: [15, 15, 0, 5],
  enableScroll: false,
  legend: {
    show: false
  },
  xAxis: {
    disableGrid: true
  },
  yAxis: {
    gridType: "dash",
    dashLength: 2
  },
  extra: {
    area: {
      type: "straight",
      opacity: 0.2,
      addLine: true,
      width: 2,
      gradient: true
    }
  }
};

const learningProgressData = {
  categories: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
  series: [
    {
      name: "学习时长",
      data: [2.5, 3.2, 1.8, 4.0, 3.5, 5.2, 4.8]
    }
  ]
};

const pieChartOpts = {
  color: ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884d8"],
  padding: [5, 5, 5, 5],
  enableScroll: false,
  legend: {
    show: true,
    position: "bottom",
    lineHeight: 25,
  },
  extra: {
    pie: {
      activeOpacity: 0.5,
      activeRadius: 10,
      offsetAngle: 0,
      labelWidth: 15,
      border: false,
      borderWidth: 3,
      borderColor: "#FFFFFF"
    }
  }
};

const knowledgePointsData = {
  series: [
    {
      data: [
        { name: "java", value: 85 },
        { name: "Mysql", value: 72 },
        { name: "Python", value: 90 },
        { name: "C++", value: 65 },
        { name: "C#", value: 78 }
      ]
    }
  ]
};

const subjects = [
  { name: "java", value: 85 },
  { name: "Mysql", value: 72 },
  { name: "Python", value: 90 },
  { name: "C++", value: 65 },
  { name: "C#", value: 78 }
];

const columnChartOpts = {
  color: ["#3b82f6"],
  padding: [15, 15, 0, 5],
  enableScroll: false,
  legend: {
    show: false
  },
  xAxis: {
    disableGrid: true
  },
  yAxis: {
    gridType: "dash",
    dashLength: 2
  },
  extra: {
    column: {
      type: "group",
      width: 30,
      activeBgColor: "#000000",
      activeBgOpacity: 0.08
    }
  }
};

const learningHabitsData = {
  categories: ["早晨", "下午", "晚上"],
  series: [
    {
      name: "学习时间",
      data: [35, 45, 20]
    }
  ]
};

const habitInsights = [
  "你的学习高峰期在下午，此时学习效率最高",
  "晚上学习时间较少，且专注度下降明显",
  "周末学习时间比工作日多35%，但效率略有下降"
];

const focusLevels = [
  { time: "早晨", value: 85 },
  { time: "下午", value: 92 },
  { time: "晚上", value: 68 }
];

const growthChartOpts = {
  color: ["#3b82f6"],
  padding: [15, 15, 0, 5],
  enableScroll: false,
  legend: {
    show: false
  },
  xAxis: {
    disableGrid: true
  },
  yAxis: {
    min: 60,
    max: 100,
    gridType: "dash",
    dashLength: 2
  },
  extra: {
    area: {
      type: "straight",
      opacity: 0.2,
      addLine: true,
      width: 2,
      gradient: true
    }
  }
};

const growthTrajectoryData = {
  categories: ["1月", "2月", "3月", "4月", "5月", "6月"],
  series: [
    {
      name: "成绩",
      data: [65, 68, 72, 75, 82, 87]
    }
  ]
};

const growthHighlights = [
  "近6个月总体成绩提升了22分，进步显著",
  "java科目进步最大，从72分提升至92分",
  "4月至5月进步最快，与增加的学习时间正相关"
];

const weeklyPriorities = [
  "物理：完成力学专项练习，重点攻克牛顿定律应用",
  "数学：完成函数与导数章节，巩固极限概念",
  "英语：背诵核心词汇100个，完成阅读理解训练"
];

const dailySchedule = [
  { time: "早晨 6:30 - 7:30", activity: "英语词汇记忆与听力训练" },
  { time: "下午 14:00 - 16:30", activity: "数学与物理重点知识学习" },
  { time: "晚上 19:00 - 21:00", activity: "作业完成与知识点复习" }
];

const longTermGoals = [
  { name: "期末考试目标", target: "90分以上", progress: 75 },
  { name: "物理竞赛准备", target: "50%", progress: 50 },
  { name: "英语四级备考", target: "65%", progress: 65 }
];
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8fafc;
}

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 56px;
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #2563eb;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #2563eb;
  flex: 1;
  text-align: center;
  margin-left: -32px;
  /* Offset for the back button to center the title */
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #64748b;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #e2e8f0;
}

.avatar image {
  width: 100%;
  height: 100%;
}

.content {
  flex: 1;
  padding: 16px;
}

.profile-card {
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 8px;
  background: linear-gradient(to right, #2563eb, #60a5fa);
  color: #ffffff;
}

.profile-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  overflow: hidden;
}

.profile-avatar image {
  width: 100%;
  height: 100%;
}

.profile-name {
  font-size: 20px;
  font-weight: bold;
}

.profile-class {
  font-size: 14px;
  color: #bfdbfe;
  margin-top: 4px;
}

.profile-badges {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  background-color: #1d4ed8;
  color: #ffffff;
}

.tabs {
  display: flex;
  background-color: #eff6ff;
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 4px;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
  border-radius: 4px;
  color: #64748b;
}

.tab-item.active {
  background-color: #ffffff;
  color: #2563eb;
}

.tab-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-header {
  padding: 16px 16px 8px;
}

.card-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  color: #2563eb;
}

.card-description {
  font-size: 12px;
  color: #64748b;
}

.card-content {
  padding: 8px 16px 16px;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.stat-item {
  padding: 12px;
  background-color: #eff6ff;
  border-radius: 8px;
}

.stat-label {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
  display: block;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #2563eb;
}

.chart-container {
  margin-top: 16px;
}

.chart-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.chart-wrapper {
  height: 180px;
  width: 100%;
}

.suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.suggestion-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #dbeafe;
  color: #2563eb;
  flex-shrink: 0;
}

.suggestion-content {
  flex: 1;
}

.suggestion-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.suggestion-desc {
  font-size: 12px;
  color: #64748b;
}

.progress-list {
  margin-top: 24px;
  margin-bottom: 16px;
}

.progress-item {
  margin-bottom: 12px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.progress-label {
  font-size: 14px;
}

.progress-value {
  font-size: 14px;
  font-weight: 500;
}

.progress-bar {
  height: 8px;
  background-color: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #2563eb;
  border-radius: 4px;
}

.highlight-box {
  margin-top: 16px;
  padding: 16px;
  background-color: #eff6ff;
  border-radius: 8px;
}

.highlight-title {
  font-size: 14px;
  font-weight: 500;
  color: #1d4ed8;
  margin-bottom: 8px;
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.red {
  background-color: #ef4444;
}

.orange {
  background-color: #f97316;
}

.highlight-text {
  font-size: 12px;
}

.insight-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.insight-icon {
  color: #2563eb;
  margin-top: 2px;
  flex-shrink: 0;
}

.insight-text {
  font-size: 12px;
  flex: 1;
}

.ranking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.ranking-item {
  padding: 16px;
  background: linear-gradient(to bottom right, #2563eb, #3b82f6);
  border-radius: 8px;
  color: #ffffff;
}

.ranking-label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.ranking-value {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
}

.ranking-change {
  font-size: 12px;
  color: #bfdbfe;
}

.priority-box {
  padding: 16px;
  background-color: #eff6ff;
  border-radius: 8px;
  margin-bottom: 16px;
}

.priority-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.priority-title {
  font-size: 14px;
  font-weight: 500;
  color: #1d4ed8;
}

.priority-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  background-color: #dbeafe;
  color: #1d4ed8;
}

.schedule-box {
  padding: 16px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  margin-bottom: 16px;
}

.schedule-title {
  font-size: 14px;
  font-weight: 500;
  color: #1d4ed8;
  margin-bottom: 12px;
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.schedule-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #dbeafe;
  color: #2563eb;
  flex-shrink: 0;
}

.schedule-content {
  flex: 1;
}

.schedule-time {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

.schedule-desc {
  font-size: 12px;
  color: #64748b;
}

.goals-box {
  padding: 16px;
  background: linear-gradient(to right, #2563eb, #3b82f6);
  border-radius: 8px;
  color: #ffffff;
}

.goals-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
}

.goals-box .progress-bar {
  background-color: rgba(255, 255, 255, 0.3);
}

.goals-box .progress-fill {
  background-color: #ffffff;
}

.goals-box .progress-label,
.goals-box .progress-value {
  color: #ffffff;
}
</style>